<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>发票补开</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.all.js"></script>
    <script src="/webjars/vue/2.5.17/dist/vue.js"></script>
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <style type="text/css">
        #changeMessage {
            color: red;
            margin-left: 150px;
            visibility: hidden;
        }
    </style>
</head>

<body>

<div id="app" class="form label-inline uniform">

    <h2>发票补开</h2>
    <p style="margin-left:20px;">说明：
        1.不修改发票号表示重新打印发票。
        2.修改发票号表示将旧的发票作废，并将新的发票与交费单关联，以及打印新发票。</p>

    <div class="field"><label>发票类型</label>
        <input size="50" type="text" class="medium" :value="pypay.ivInvoice.invoiceType==0?'普通发票':'增值税发票'"
               disabled="disabled"/>
    </div>
    <div class="field"><label>状态</label>
        <input size="50" type="text" class="medium" :value="pypay.ivInvoice.used==0?'未使用':'已使用'" disabled="disabled"/></div>

    <div class="field"><label>发票号码</label>
        <input size="50" type="text" class="medium" :value="pypay.invoice" onKeyUp="invoiceChange();" id="invoice"/>
        <br/>
        <span id="changeMessage">由于你修改了发票号码，此操作会将原发票号码作废，将新发票号码与交费单关联。</span></div>

    <div class="field"><label>交费单号</label>
        <input size="50" type="text" class="medium" :value="pypay.payNo" disabled="disabled" /></div>

    <div class="field"><label>交费用户</label>
        <input size="50" type="text" class="medium" :value="pypay.usUser.username" disabled="disabled"/></div>

    <div class="field"><label>收费员</label>
        <input size="50" type="text" class="medium" :value="pypay.syEmp.empNmae"  disabled="disabled"/></div>

    <div class="field"><label>交费金额</label>
        <input size="50" type="text" class="medium" :value="pypay.payMoney"  disabled="disabled"/></div>

    <div class="field"><label>交费日期</label>
        <input size="50" type="text" class="medium" :value="pypay.payDate"  disabled="disabled"/></div>

    <div class="buttonrow">
        <input id="submit" type="submit" class="btn" value="重新打印发票" @click="updateInvoiceNo();"></input>
    </div>

</div>
<script type="text/javascript">
    var $ = layui.jquery,
        layer = layui.layer;

    //根据交费单号查询  发票信息
    function load() {
        const url = new URLSearchParams(location.search);
        var payNo = url.get("payNo");
        var index = layer.load(0, {shade: false});
        $.ajax({
            type: 'GET',
            url: "/py-pay/findByPayNo",
            data: {"payNo": payNo},
            dataType: 'JSON',
            success: function (json) {
                if (json.code == 200) {
                    app.pypay = json.data.pyPay;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
                layer.close(index)
            }
        });
    }

    var app = new Vue({
        el: "#app",
        data: {
            pypay: {
                usUser: {
                    userno: '',
                    username: '',
                    abc: '',
                    createdate: '',
                    address: '',
                    phone: '',
                    smsphone: '',
                    areaID:'' ,
                    userType: '',
                    payType: '',
                    bankName: '',
                    bankNum: '',
                    formula: '',
                    userMoney: '',
                    meterID: '',
                    docNum: '',
                    pwd: '',
                    contractNum: '',
                    contractDate: '',
                    volumeID: '',
                    volumeOrderIndex: '',
                    disabled: ''
                },
                PayDate: '',
                ivInvoice: {
                    used: '',
                    empID: '',
                    invoiceNo: '',
                    useDate: '',
                    invoiceType: '',
                    invalid: '',
                    inID: '',
                    archiveDate: '',
                    outID: '',
                    archived: '',
                    invalidDate: '',
                    archiveID: ''
                },
                syEmp: {
                    id: '',
                    pwd: '',
                    disabled: '',
                    deptID: '',
                    remark: '',
                    empNo: '',
                    empNmae: ''
                },
                payDate: '',
                empID: '',
                userNo: '',
                payType: '',
                invoice: '',
                payNo: '',
                payMoney: '',
                useMoney: ''
            }
        }, methods: {
            //修改发票号码
            updateInvoiceNo(){
                //如果修改了发票编号   则将原发票作废  关联新的发票
                if ($("#invoice").val()!=app.pypay.invoice) {
                    var index = layer.load(0, {shade: false});
                    $.ajax({
                        type: 'POST',
                        url: "/py-pay/updateInvoiceNo",
                        data: {"payNo": app.pypay.payNo,"InvoiceNo1":app.pypay.invoice,"InvoiceNo2":$("#invoice").val()},
                        dataType: 'JSON',
                        success: function (json) {
                            if (json.code == 200) {
                                // app.pypay = json.data.pyPay;
                                layer.msg("更新发票号码成功", {icon: 1})
                            } else {
                                layer.msg(json.message, {icon: 2})
                            }
                            layer.close(index)
                        }
                    });
                }
            }
        }, created() {
            load();
        }
    })
    //发票号码发生改变
    function invoiceChange() {
        if ($("#invoice").val()!=app.pypay.invoice) {
            //发票号码发生改变时，要进行的处理
            $('#changeMessage').css('visibility', 'visible');
            $('#submit').val('修改发票号码并重新打印');
        }else{
            $('#changeMessage').css('visibility', '');
            $('#submit').val('重新打印发票');
        }
    }

    //提交表单
    function ok() {
        //打印发票
        showWindow({url: 'pay_printInvoice.html', width: 800, height: 260});
    }
</script>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();
    });

</script>

</body>

</html>